<template>
    <el-dialog
        title="登录/注册"
        :visible.sync="dialogVisible"
        class="dialog"
        width="35%">
        <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
            <br>
            <el-tab-pane
                label="验证码登录"
                name="first">
                <LoginOne :msg=1
                          @close="getClose"></LoginOne>
            </el-tab-pane>
            <el-tab-pane
                label="密码登录"
                name="second">
                <LoginTwo :msg=2
                          @registTo="getChild"
                          @close="getClose"
                          v-on="$listeners"></LoginTwo>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script>
import LoginOne from "@/loginType/LoginOne.vue";
import LoginTwo from "@/loginType/LoginTwo.vue";
export default {
    data(){
        return{
            activeName:'first',
            dialogVisible:false
        };
    },
    components:{
        LoginOne,
        LoginTwo
    },
    methods:{
        handleClick(tab,event){
            console.log(tab,event);
        },
        getChild(msg){
            this.activeName = msg
        },
        getClose(msg){
            this.dialogVisible = msg
        }
    },
}
</script>

<style scoped>
.el-tabs{
    width: 80%;
    margin: 0 auto;
}
.el-dialog {
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:calc(100% - 200px);
    max-width:calc(100% - 30px);
}
.el-dialog__body{
    padding: 0 20px;
}
</style>